<template>
  <view class="page">
    <!-- <uni-nav-bar
      fixed="true"
      @click-left="back"
      left-text="我的"
      title="我的二维码"
      left-icon="jiantou2"
      background-color="#3A3734"
      shadow="false"
      color="#fff"
    ></uni-nav-bar>
    <view :style="style"></view> -->
    <view class="mask">
      <view class="showcode">
        <view class="info">
          <view class="mp">

            <image src="../../../static/yfb/my/touxiang.jpg"></image>
          </view>
          <view>
            <view class="fsz">张三娃</view>
            <view class="fsz_1">阿根廷 不因肉丝爱丽时尚</view>
          </view>
        </view>
        <!-- <view class="ermacode"> -->
        <canvas
          class="qrcode"
          canvas-id="qrcode"
        ></canvas>
        <!-- </view> -->

        <view class="mes">用易付宝扫二维码，加我好友</view>
      </view>
    </view>
  </view>
</template>

<script>
import uniNavBar from "@/components/uninavbar";
import uniIcon from "@/components/uni-icon";
import uniStatusBar from "@/components/uni-status-bar";
// import qrcode from "@/util/qrcode.min.js";
import QRCode from "@/util/weapp-qrcode.js";

export default {
  onReady() {
    uni.setScreenBrightness({
      value: 0.6,
      success: function() {
        console.log("success");
      }
    });
  },
  onHide() {
    uni.setScreenBrightness({
      value: 0.3,
      success: function() {
        console.log("success");
      }
    });
  },
  onUnload() {
    uni.setScreenBrightness({
      value: 0.5,
      success: function() {
        console.log("success");
      }
    });
  },
  onLoad() {
    var qrcode = new QRCode("qrcode", {
      text: "https://www.baidu.com",
      width: 250,
      height: 250,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H
    });
  },
  components: {
    uniNavBar,
    uniIcon,
    uniStatusBar
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1
      });
    }
  },
  computed: {
    //获取状态栏高度
    style() {
      var systemInfo = uni.getSystemInfoSync();
      var systo = uni.getSystemInfo();
      var statusBarHeight = systemInfo.statusBarHeight;
      return `height:${statusBarHeight + 44}px`;
    },
    // 获取屏幕可用高度
    stylecolor() {
      var systemInfo = uni.getSystemInfoSync();
      var screenHeight = systemInfo.screenHeight;
      return `height:${screenHeight}px`;
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  // background: #3a3734;
}
.mask {
  margin-top: 63upx;
  width: 100%;
  height: 100%;
}

.showcode {
  margin: 0 auto;
  width: 80%;
  padding: 0 4%;
  background: #ffffff;
}
.info {
  display: flex;
  padding: 60upx 0 0 40upx;
  .mp {
    width: 106upx;
    height: 106upx;
    border-radius: 10px;
    background: yellow;
    margin-right: 25upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .fsz {
    font-size: 34upx;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
  }
  .fsz_1 {
    font-size: 28upx;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(170, 170, 170, 1);
  }
}
.ermacode {
  // width: 454upx;
  // height: 457upx;
  // background: red;
  // margin: 111upx auto 95upx;
  // text-align: center;
  // display: flex;
  // justify-content: center;
}
//因为插件是px 的,所以我们要大一部 upx
.qrcode {
  width: 500upx;
  height: 500upx;
  // background: red;
  margin: 111upx auto 95upx;
  text-align: center;
}
.mes {
  text-align: center;
  padding-bottom: 169upx;
  font-size: 34upx;
  font-weight: 400;
  color: rgba(180, 185, 191, 1);
}
</style>